<template>
  <div id="app" style="padding: 16px;">
    <el-divider content-position="left">模型文件基础信息</el-divider>
    <el-form v-if="form" ref="form" :model="form" label-width="140px">
      <el-row>
        <el-col :span="5" :offset="2">
          <el-form-item label="作者">
            <el-tooltip class="item" effect="dark" :content="form.author" placement="top-start">
              <el-input v-model="form.author" size="small"/>
            </el-tooltip>
          </el-form-item>
        </el-col>

        <el-col :span="5">
          <el-form-item label="邮箱">
            <el-tooltip class="item" effect="dark" :content="form.email" placement="top-start">
              <el-input v-model="form.email" size="small"/>
            </el-tooltip>
          </el-form-item>
        </el-col>

        <el-col :span="5" :offset="2">
          <el-form-item label="模块名">
            <el-tooltip class="item" effect="dark" :content="form.model_name" placement="top-start">
              <el-input v-model="form.model_name" @input="inputModelName" size="small"/>
            </el-tooltip>
          </el-form-item>
        </el-col>

        <el-col :span="5">
          <el-form-item label="父模块名">
            <el-tooltip class="item" effect="dark" :content="form.base_model_name" placement="top-start">
              <el-input v-model="form.base_model_name" size="small"/>
            </el-tooltip>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="5" :offset="2">
          <el-form-item label="数据表名">
            <el-tooltip class="item" effect="dark" :content="form.table_name" placement="top-start">
              <el-input v-model="form.table_name" size="small"/>
            </el-tooltip>
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item label="数据表备注">
            <el-tooltip class="item" effect="dark" :content="form.table_comment" placement="top-start">
              <el-input v-model="form.table_comment" size="small"/>
            </el-tooltip>
          </el-form-item>
        </el-col>
        <el-col :span="5" :offset="2">
          <el-form-item label="文件名称">
            <el-tooltip class="item" effect="dark" :content="form.file_name" placement="top-start">
              <el-input v-model="form.file_name" size="small"/>
            </el-tooltip>
          </el-form-item>
        </el-col>
      </el-row>
      <el-divider content-position="left">导入包列表</el-divider>
      <el-row>

        <div v-for="(pkg, pkg_index) in form.import_pkg_list" :key="pkg_index">
          <el-col :span="2" style="padding-left: 16px;">
            <el-button type="primary" icon="el-icon-plus" circle size="mini" @click="addImportPkg"/>
            <el-button type="danger" icon="el-icon-minus" circle size="mini" @click="delImportPkg(pkg_index)"/>
          </el-col>

          <el-col :span="5">
            <el-form-item label="导入位置(from)">
              <el-tooltip class="item" effect="dark" :content="pkg.from" placement="top-start">
                <el-input v-model="pkg.from" size="small"/>
              </el-tooltip>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-tooltip class="item" effect="dark" :content="pkg.import" placement="top-start">
              <el-form-item label="导入内容(import)">
                <el-input v-model="pkg.import" size="small"/>
              </el-form-item>
            </el-tooltip>
          </el-col>
        </div>
      </el-row>
      <el-divider content-position="left">模型字段</el-divider>
      <el-row v-for="(field, field_index) in form.fields" :key="field_index">

        <el-col :span="2" style="padding-left: 16px;">
          <el-button type="primary" icon="el-icon-plus" circle size="mini" @click="addField"/>
          <el-button type="danger" icon="el-icon-minus" circle size="mini" @click="delField(field_index)"/>
        </el-col>

        <el-col :span="5">
          <el-form-item label="字段名">
            <el-tooltip class="item" effect="dark" :content="field.field_name" placement="top-start">
              <el-input v-model="field.field_name" @input="inputFieldType(field.field_name, field_index)"
                        @change="changeModelName(field.field_name, field_index)" size="small"/>
            </el-tooltip>
          </el-form-item>
        </el-col>

        <el-col :span="5">
          <el-form-item label="字段类型">
            <el-tooltip class="item" effect="dark" :content="field.field_type_class" placement="top-start">
              <el-select v-model="field.field_type_class" placeholder="字段类型" filterable size="small">
                <el-option v-for="(item, index) in fieldOptions" :key="index" :label="item.label"
                           :value="item.value"/>
              </el-select>
            </el-tooltip>
          </el-form-item>
        </el-col>

        <div v-for="(attr, attr_index) in field.attrs" :key="attr_index">

          <el-col :span="2" style="padding-left: 16px;" :offset="getAttrOffset(attr_index)">
            <el-button type="primary" icon="el-icon-plus" circle size="mini" @click="addAttr(field_index)"/>
            <el-button type="danger" icon="el-icon-minus" circle size="mini"
                       @click="delAttr(field_index, attr_index)"/>
          </el-col>

          <el-col :span="5">
            <el-form-item label="字段属性">
              <el-tooltip class="item" effect="dark" :content="attr.key" placement="top-start">
                <el-select v-model="attr.key" placeholder="字段属性" filterable size="small">
                  <el-option v-for="(item, index) in attrOptions" :key="index" :label="item.label"
                             :value="item.value"/>
                </el-select>
              </el-tooltip>
            </el-form-item>
          </el-col>

          <el-col :span="5">
            <el-form-item label="属性值">
              <el-tooltip class="item" effect="dark" :content="attr.value" placement="top-start">
                <el-input v-model="attr.value" size="small"/>
              </el-tooltip>
            </el-form-item>
          </el-col>

        </div>
      </el-row>

      <el-form-item>
        <el-button type="primary" @click="onSubmit" size="mini">生成</el-button>
        <el-button type="danger" @click="resetConfig" size="mini">恢复</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import interfaceObj from '../../api/model'

export default {
  data () {
    return {
      form: null,
      fieldOptions: null,
      attrOptions: null
    }
  },
  mounted () {
    this.resetConfig()
  },
  computed: {
    getAttrOffset () {
      return function (attrIndex) {
        if (attrIndex !== 0) {
          return 12
        }
      }
    }
  },
  methods: {
    addImportPkg () {
      this.form.import_pkg_list.push({
        from: '',
        pkg: ''
      })
    },
    delImportPkg (fieldIndex) {
      if (this.form.import_pkg_list.length === 1) {
        this.$message({
          message: '至少导入一个包'
        })
        return
      }
      this.form.import_pkg_list.splice(fieldIndex, 1)
    },
    addField () {
      this.form.fields.push({
        field_name: '',
        field_type_class: 'String',
        attrs: [
          {
            key: 'comment',
            value: '"说明"'
          }
        ]
      })
    },
    delField (fieldIndex) {
      if (this.form.fields.length === 1) {
        this.$message({
          message: '每个模块最少一个字段',
          type: 'warning'
        })
        return
      }
      this.form.fields.splice(fieldIndex, 1)
    },
    addAttr (fieldIndex) {
      this.form.fields[fieldIndex].attrs.push({
        key: '',
        value: ''
      })
    },
    delAttr (fieldIndex, attrIndex) {
      if (this.form.fields[fieldIndex].attrs.length === 1) {
        this.$message({
          message: '每个字段最少一个属性',
          type: 'warning'
        })
        return
      }
      this.form.fields[fieldIndex].attrs.splice(attrIndex, 1)
    },
    inputModelName (content) {
      const wordList = content.match(/[A-Z][a-z]+/g)
      let tableName = ''
      if (wordList !== null) {
        wordList.forEach((item, index) => {
          if (index !== (wordList.length - 1)) {
            tableName = tableName + item.toLowerCase() + '_'
          } else {
            tableName = tableName + item.toLowerCase()
          }
        })
        this.form.table_name = tableName
        this.form.file_name = tableName
      }
    },
    changeModelName (content, fieldIndex) {
      this.form.fields.forEach((item, index) => {
        if (item.field_name === content && index !== fieldIndex) {
          this.$message.error('已存在该字段' + content)
        }
      })
    },
    // 如果字段中存在datetime字样则将字段类型自动赋值为DateTime
    inputFieldType (content, fieldIndex) {
      if (content.indexOf('datetime') !== -1) {
        this.form.fields[fieldIndex].field_type_class = 'DateTime'
        this.form.fields[fieldIndex].attrs.forEach(item => {
          if (item.key === 'comment') {
            item.value = '"日期"'
          }
        })
      }
    },
    onSubmit () {
      this.form.columns = []
      this.form.fields.forEach(item => {
        let columnAttr = item.field_type_class
        item.attrs.forEach(attr => {
          columnAttr = columnAttr + ', ' + attr.key + '=' + attr.value
        })
        this.form.columns.push({
          column_name: item.field_name,
          column_attr: columnAttr
        })
      })
      interfaceObj.generateModel(this.form).then(res => {
        this.$store.commit('changeAuthor', this.form.author)
        this.$store.commit('changeEmail', this.form.email)
        this.$store.commit('changeModuleName', this.form.model_name)
        this.$store.commit('changeModelFields', this.form.fields)
        console.log(res)
      })
    },
    resetConfig () {
      this.$axios.get('/model_param.json').then(res => {
        this.form = res.data.form
        this.fieldOptions = res.data.field_options
        this.attrOptions = res.data.attr_options
        this.$store.commit('changeAuthor', this.form.author)
        this.$store.commit('changeEmail', this.form.email)
        this.$store.commit('changeModuleName', this.form.model_name)
        this.$store.commit('changeModelFields', this.form.fields)
        console.log(this.$store.state.author)
      })
    }
  }
}
</script>

<style>

</style>
